<script setup>
import { reactify } from '@vueuse/core'
import * as echarts from 'echarts'
import { reactive } from 'vue'
const { proxy } = getCurrentInstance()

// 查询条件
const SelectList = ref([{ type: '日期范围' }])

const options = ref([
  {
    value: '选项1',
    label: '黄金糕'
  },
  {
    value: '选项2',
    label: '双皮奶'
  }
])

// 车间(线别)年度生产统计
const workshop = reactive({
  title: {
    text: '车间(线别)年度生产统计'
  },
  legend: {
    // 图例
    show: true
  },
  tooltip: {
    //图例提示框，默认不显示
    trigger: 'axis',
    axisPointer: {
      //---指示样式
      type: 'shadow'
    }
  },
  // echarts固定高度
  grid: {
    // x: "12%",//x 偏移量
    // y: "7%", // y 偏移量
    // width: "87%", // 宽度
    left: '3%',
    right: '4%',
    bottom: '3%',
    height: '80%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'value'
    // axisLabel: {
    //   interval: 0,
    //   rotate: 0,
    //   color: '#21C1FF',
    //   fontSize: '16px'
    // }
  },
  series: [
    {
      name: '投入',
      type: 'bar',
      barWidth: '10%',
      data: [110, 130, 140, 100, 100, 100, 100, 100, 100, 100, 100, 100],
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '产出',
      type: 'bar',
      barWidth: '10%',
      data: [130, 140, 140, 100, 100, 100, 100, 100, 100, 100, 100, 100],
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '制成率',
      type: 'line',
      data: [130, 140, 140, 100, 100, 100, 100, 100, 100, 100, 100, 100],
      emphasis: {
        focus: 'series'
      }
    }
  ]
})

// 班组生产对比(日、周、月、季度、年)
const TeamProduction = reactive({
  title: {
    text: '班组生产对比'
  },
  legend: {
    show: true,
    orient: 'horizontal',
    right: '1%'
  },
  tooltip: {
    //图例提示框，默认不显示
    trigger: 'axis',
    axisPointer: {
      //---指示样式
      type: 'shadow'
    }
  },
  // echarts固定高度
  grid: {
    // x: "12%",//x 偏移量
    // y: "7%", // y 偏移量
    // width: "87%", // 宽度
    left: '3%',
    right: '4%',
    bottom: '3%',
    height: '80%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['班组1', '班组2'],
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'value'
    // axisLabel: {
    //   interval: 0,
    //   rotate: 0,
    //   color: '#21C1FF',
    //   fontSize: '16px'
    // }
  },
  series: [
    {
      name: '投入',
      type: 'bar',
      barWidth: '10%',
      data: [110, 130, 140],

      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '产出',
      type: 'bar',
      barWidth: '10%',
      data: [130, 140, 140],
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '制成率',
      type: 'line',
      data: [130, 140, 140],
      emphasis: {
        focus: 'series'
      }
    }
  ]
})

// 车间(线别)年度生产对比
const option3 = reactive({
  title: {
    text: '车间(线别)年度生产对比'
  },
  legend: {
    // 图例
    show: true
  },
  tooltip: {
    //图例提示框，默认不显示
    trigger: 'axis',
    axisPointer: {
      //---指示样式
      type: 'shadow'
    }
  },
  // echarts固定高度
  grid: {
    // x: "12%",//x 偏移量
    // y: "7%", // y 偏移量
    // width: "87%", // 宽度
    left: '3%',
    right: '4%',
    bottom: '3%',
    height: '80%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'value'
    // axisLabel: {
    //   interval: 0,
    //   rotate: 0,
    //   color: '#21C1FF',
    //   fontSize: '16px'
    // }
  },
  series: [
    {
      name: '数据',
      type: 'line',
      barWidth: '10%',
      data: [110, 130, 140, 100, 100, 100, 130, 100, 100, 100, 100, 140],
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '数据3',
      type: 'line',
      barWidth: '10%',
      data: [130, 140, 140, 34, 100, 78, 140, 100, 130, 100, 100, 100],
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '数据5',
      type: 'line',
      data: [100, 119, 140, 100, 100, 70, 119, 100, 123, 130, 60, 130],
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '数据6',
      type: 'line',
      data: [100, 140, 140, 100, 140, 100, 100, 140, 100, 100, 100, 100],
      emphasis: {
        focus: 'series'
      }
    }
  ]
})

// 车间(线别)投料统计
const workshopFeeding = reactive({
  title: {
    text: '车间(线别)投料统计'
  },
  legend: {
    // 图例
    show: true
  },
  tooltip: {
    //图例提示框，默认不显示
    trigger: 'axis',
    axisPointer: {
      //---指示样式
      type: 'shadow'
    }
  },
  // echarts固定高度
  grid: {
    // x: "12%",//x 偏移量
    // y: "7%", // y 偏移量
    // width: "87%", // 宽度
    left: '3%',
    right: '4%',
    bottom: '3%',
    height: '80%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['棉花1', '棉花2', '棉花3', '棉花4', '棉花5'],
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'value'

    // axisLabel: {
    //   interval: 0,
    //   rotate: 0,
    //   color: '#21C1FF',
    //   fontSize: '16px'
    // }
  },
  series: [
    {
      name: '数量',
      type: 'bar',

      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示数值
            position: 'top', //数值在上方显示
            textStyle: {
              //数值样式
              fontSize: 14, //字体大小
              color: '#4a67bb'
            }
          }
        }
      },
      barWidth: '10%',
      data: [10, 100, 140, 70, 90],
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '包数',
      type: 'bar',
      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示数值
            position: 'top', //数值在上方显示
            textStyle: {
              //数值样式
              fontSize: 14, //字体大小
              color: '#88c470'
            }
          }
        }
      },
      barWidth: '10%',
      data: [30, 40, 120, 70, 100],
      emphasis: {
        focus: 'series'
      }
    }
  ]
})

// 查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 10
})

// 条件查询
const selectSubmit = Obj => {
  for (let KEY in Obj) {
    query[KEY] = Obj[KEY]
  }
  getList()
}
</script>
<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <SelectForm :SelectForm="SelectList" @selectSubmit="selectSubmit" />
    <el-divider />
    <div class="top">
      <el-card class="box-card">
        <div class="top-left">
          <span>车间</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <span>线别</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
        <Echarts width="100%" height="300px" :options="workshop" isClick @callbackFun="callbackFun" />
      </el-card>
      <el-card class="box-card">
        <div class="top-left">
          <span>线别</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <span>时间</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
        <Echarts width="100%" height="300px" :options="TeamProduction" isClick @callbackFun="callbackFun" />
      </el-card>
    </div>
    <div class="bottom">
      <el-card class="box-card">
        <div class="bottom-right">
          <span>类型</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <span>车间</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <span>线别</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
        <Echarts width="100%" height="300px" :options="option3" isClick @callbackFun="callbackFun" />
      </el-card>
      <el-card class="box-card">
        <div class="bottom-right">
          <span>类型</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <span>时间</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <span>车间</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <span>线别</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
        <Echarts width="100%" height="300px" :options="workshopFeeding" isClick @callbackFun="callbackFun" />
      </el-card>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
}
.top {
  display: flex;
  margin-top: 20px;
  .el-card {
    width: 50%;
  }

  .top-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    span {
      width: 80px;
      text-align: center;
    }
  }
}
.bottom {
  display: flex;
  margin-top: 20px;
  .el-card {
    width: 50%;
  }
  .bottom-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    span {
      width: 80px;
      text-align: center;
    }
  }
}

.top-left ::v-deep .el-input__inner {
  width: 188px !important;
}
.top-right ::v-deep .el-input__inner {
  width: 188px !important;
}
.box-card {
  margin-left: 20px;
}
</style>
